<template>
  <div v-show="show" class="advanced-setting">
    <div class="advanced-item">
      <div class="title">Over Time</div>
      <div class="content">
        <Row class="advance-item-row">
          <i-col span="6"><el-checkbox :disabled="weeklyOverTimeDisabled" :true-label=1 :false-label=0 :label="companyTimeSettingForm.overtimeRule.isWeeklyOvertime"  v-model="companyTimeSettingForm.overtimeRule.isWeeklyOvertime">Calcuate Weekly overtime after: </el-checkbox></i-col>
          <i-col span="2"><Input v-model="companyTimeSettingForm.overtimeRule.weeklyOvertimeAmount" :disabled="weeklyOverTimeDisabled"></Input></i-col>
          <i-col span="3" style="padding-left: 10px">Hours / week</i-col>
        </Row>
        <Row class="advance-item-row">
          <i-col span="6"><el-checkbox :disabled="dailyOverTimeDisabled"  :true-label=1 :false-label=0 v-model="companyTimeSettingForm.overtimeRule.isDailyOvertime">Also Calcuate Daily overtime after:</el-checkbox></i-col>
          <i-col span="2"><Input :disabled="dailyOverTimeDisabled" v-model="companyTimeSettingForm.overtimeRule.dailyOvertimeAmount"></Input></i-col>
          <i-col span="3" style="padding-left: 10px">Hours / week</i-col>
        </Row>
        <Row class="advance-item-row">
          <i-col span="6"><el-checkbox  :disabled="dailyDbOverTimeDisabled"   :true-label=1 :false-label=0 v-model="companyTimeSettingForm.overtimeRule.isDailyDbOvertime">Also Calcuate Daily doubletime after:</el-checkbox></i-col>
          <i-col span="2"><Input :disabled="dailyDbOverTimeDisabled"  v-model="companyTimeSettingForm.overtimeRule.dailyDbOvertimeAmount"></Input></i-col>
          <i-col span="3" style="padding-left: 10px">Hours / week</i-col>
        </Row>
        <Row class="advance-item-row">
          <i-col span="6"><el-checkbox :disabled="companyTimeSettingForm.overtimeRule.isWeeklyOvertime == 0"  :true-label=1 :false-label=0 v-model="isStateOvertimeRule">Use state overtime rules</el-checkbox></i-col>
        </Row>
      </div>
    </div>
    <div class="advanced-item">
      <div class="title">PTO</div>
      <div class="content">
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isEnablePto" :true-label=1 :false-label=0>Enable PTO </el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          When checked, Paid Time Off (PTO) support is enabled. If your company allows employees to have vacation, sick, or holiday time, enable this option and then create the PTO codes your company uses. Once your company's PTO codes are configured, PTO timesheets can be created for employees via the "Manage Timesheets" menu item. You will also be able to submit your own PTO hours with the Paid Time Off menu item that will appear next time you sign in. PTO entries will display in the Timesheet List but are colored differently and summarized separately.
        </p>
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isEnablePto == 0"  v-model="companyTimeSettingForm.isEmployeePto" :true-label=1 :false-label=0>Allow employees to submit PTO</el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          When checked, all employees will see the "My Paid Time Off" menu item, and are allowed to submit their own PTO hours assuming that PTO codes have been assigned to them.<br>
          It is up to you to review PTO hours submitted by employees for accuracy.
        </p>
      </div>
    </div>
    <!--=================================================-->
    <div class="advanced-item">
      <div class="title">Time Entry</div>
      <div class="content">
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isEmployeeManageTimesheet" :true-label=1 :false-label=0>Allow employees to manage their own timesheets. </el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          Allows all users to sign in from anywhere and completely manage their own timesheets via the Time Slider, Manual Time Card, etc. If not checked individual employees can be given the permission to enter time manually.
        </p>
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isEmployeeEnterNote" :true-label=1 :false-label=0>Allow employees to enter notes on My Time Card and mobile app</el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          When checked, employees can enter notes when clocking in or out. These notes are added to reports and can be viewed under Manage Timesheets.
          <Row class="advance-item-row">
            <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isEmployeeEnterNote == 0" v-model="companyTimeSettingForm.isEmployeePastNote" :true-label=1 :false-label=0>Allow employees to edit their past notes</el-checkbox></i-col>
          </Row>
          <Row class="advance-item-row">
            <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isEmployeeEnterNote == 0" v-model="companyTimeSettingForm.isNoteRequired" :true-label=1 :false-label=0>Make notes required </el-checkbox></i-col>
          </Row>
          <Row class="advance-item-row">
            <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isEmployeeEnterNote == 0" v-model="companyTimeSettingForm.isNoteEmailAdmin" :true-label=1 :false-label=0>Email administrators if employees add or edit notes on their timesheets </el-checkbox></i-col>
          </Row>
          <Row class="advance-item-row">
            <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isEmployeeEnterNote == 0" v-model="companyTimeSettingForm.isNoteEmailManager" :true-label=1 :false-label=0>Email managers if their employees add or edit notes on their timesheets</el-checkbox></i-col>
          </Row>
        </p>
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isHideHour"  :true-label=1 :false-label=0>Hide hours worked from employees</el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          Don't show employees how long they've been on the clock or allow them to view reports of their own timesheets.
          This is useful if you're using TSheets as a simple in/out board, or your employees are salaried and don't need to see the hours they've worked. If this option is selected,the time card used by employees to clock in or clock out won't display their daily hours, and their Timesheet List will be hidden.
        </p>
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isSplitTimesheet" :true-label=1 :false-label=0>Split timesheets at midnight</el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          Automatically split timesheets that straddle midnight so that hours after midnight are counted for the following day. Disable this option if you want
          hours for timesheets that straddle midnight to count for the date of the clock-in time.
          Note: This will not split your existing timesheets.
        </p>
        <Row class="advance-item-row">
          <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isAdjustClockoutTime" :true-label=1 :false-label=0>Allow employees to adjust clock-out time</el-checkbox></i-col>
        </Row>
        <p class="advance-item-row-tip">
          <Row class="advance-item-row">
            Web only: Employees can adjust their clock-out time when their shift is longer than the Clock-out Override Hours setting.
          </Row>
          <Row class="advance-item-row">
            <i-col span="24">
              Clock-out Override Hours:<Input :disabled="companyTimeSettingForm.isAdjustClockoutTime == 0" v-model="companyTimeSettingForm.clockoutOverrideHour" style="width: 82px;margin-left: 12px"></Input>
            </i-col>
          </Row>
          <Row class="advance-item-row">
            <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isAdjustClockoutTime == 0" v-model="companyTimeSettingForm.isAdjustEmailAdmin" :true-label=1 :false-label=0>Email administrators if employees adjust their clock-out time  </el-checkbox></i-col>
          </Row>
          <Row class="advance-item-row">
            <i-col span="24">
              <i-col span="24"><el-checkbox :disabled="companyTimeSettingForm.isAdjustClockoutTime == 0" v-model="companyTimeSettingForm.isAdjustEmailManager" :true-label=1 :false-label=0>Email managers if their employees adjust their clock-out time  </el-checkbox></i-col>
            </i-col>
          </Row>
        </p>
        <Row class="advance-item-row">
          <i-col span="24">
            <i-col span="24"><el-checkbox v-model="companyTimeSettingForm.isSignoutInOut" :true-label=1 :false-label=0>Sign out after clock in/out</el-checkbox></i-col>
          </i-col>
        </Row>
        <p class="advance-item-row-tip">
          Web only: Employees will automatically be signed out after they clock in, switch jobs or customers, or clock out. Individual employees may overide
          this setting.
        </p>
      </div>
    </div>
    <div class="btn-group">
      <Button class="default-btn" v-touch-ripple>Cancel</Button>
      <Button class="default-btn active"  v-touch-ripple @click="saveCompanySetting">Save</Button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AdvancedSetting',
    components: {},
    props:{
      show:{
        type:Boolean,
        default:false
      }
    },
    data () {
      return {
        isStateOvertimeRule:0,
        companyTimeSettingForm: {
          "clockoutOverrideHour": 1,
          "isAdjustClockoutTime": 1,//
          "isAdjustEmailAdmin": 1,//调整签出时间时，是否发邮件给HR0:否1：是
          "isAdjustEmailManager": 1,//调整签出时间时，是否发邮件给上司0:否1：是
          "isEmployeeEnterNote": 1,//打卡时员工是否可以输入备注0:否1：是
          "isEmployeeManageTimesheet": 1,//员工是否可以管理自己的timesheet  0:否1：是
          "isEmployeePastNote": 1,//员工是否可以修改已提交的备注0:否1：是
          "isEmployeePto": 1,//员工是否可以提交pto
          "isEnablePto": 1,//是否允许使用pto
          "isHideHour": 1,//打卡面板时间是否显示0:否1：是
          "isNoteEmailAdmin": 1,//提交备注时，是否发邮件给hr0:否1：是
          "isNoteEmailManager": 1,//提交备注时，是否发邮件给上司0:否1：是
          "isNoteRequired": 1,//备注是否必填0:否1：是
          "isSignoutInOut": 1,//签到、签出成功时，是否立即退出系统0:否1：是
          "isSplitTimesheet": 1,//凌晨是否拆分打卡时间段0:否1：是
          "whoCreateId": 1,
          "overtimeRule":{
            "dailyDbOvertimeAmount": 52245,//双倍加倍时长
            "dailyOvertimeAmount": 38046,//加班时长
            "employeeId": 16132,//员工id
            "isDailyDbOvertime": 0,//是否双倍工资加班
            "isDailyOvertime": 1,//是否加班
            "isRemoved": 14202,//是否已经删除
            "isWeeklyOvertime": 1,//是否周末加班
            "weeklyOvertimeAmount": 57875//周末加班时长
          }
        }
      }
    },
    created(){
      this.init();
    },
    computed:{
      companyTimeSetting(){
        return this.$store.getters.companyTimeSetting;
      },
      weeklyOverTimeDisabled(){
        return this.isStateOvertimeRule == 1;
      },
      dailyOverTimeDisabled(){
        return this.isStateOvertimeRule == 1 ||  this.companyTimeSettingForm.overtimeRule.isWeeklyOvertime==0 ;
      },
      dailyDbOverTimeDisabled(){
        return this.isStateOvertimeRule == 1 ||  this.companyTimeSettingForm.overtimeRule.isWeeklyOvertime==0 || this.companyTimeSettingForm.overtimeRule.isDailyOvertime==0;
      },
    },
    watch:{
      show(value){
        if(value){
          this.init();
        }
      },
      companyTimeSetting(value){
        this.companyTimeSettingForm = JSON.parse(JSON.stringify(value));
      },
      isStateOvertimeRule(value){
        if(value==1){
          this.companyTimeSettingForm.overtimeRule.isWeeklyOvertime = 1;
          this.companyTimeSettingForm.overtimeRule.weeklyOvertimeAmount = 40;
          this.companyTimeSettingForm.overtimeRule.isDailyOvertime = 1;
          this.companyTimeSettingForm.overtimeRule.dailyOvertimeAmount = 8;
          this.companyTimeSettingForm.overtimeRule.isDailyDbOvertime = 1;
          this.companyTimeSettingForm.overtimeRule.dailyDbOvertimeAmount = 12;
        }
      },
      'companyTimeSettingForm.overtimeRule.isWeeklyOvertime'(value){
        if(value==0){
          this.companyTimeSettingForm.overtimeRule.isDailyOvertime = 0;
          this.companyTimeSettingForm.overtimeRule.isDailyDbOvertime = 0;
        }else if(value == 2){
          this.isStateOvertimeRule = 1;
          this.companyTimeSettingForm.overtimeRule.isWeeklyOvertime =1;
        }
      },
      'companyTimeSettingForm.overtimeRule.isDailyOvertime'(value){
        if(value==0){
          this.companyTimeSettingForm.overtimeRule.isDailyDbOvertime = 0;
        }
      },
      'companyTimeSettingForm.isEnablePto'(value){
        if(value==0){
          this.companyTimeSettingForm.isEmployeePto = 0;
        }
      },
      'companyTimeSettingForm.isEmployeeEnterNote'(value){
        if(value == 0){
          this.companyTimeSettingForm.isEmployeePastNote = 0;
          this.companyTimeSettingForm.isNoteRequired = 0;
          this.companyTimeSettingForm.isNoteEmailAdmin = 0;
          this.companyTimeSettingForm.isNoteEmailManager = 0;
        }
      },
      'companyTimeSettingForm.isAdjustClockoutTime'(value){
        if(value == 0){
          this.companyTimeSettingForm.clockoutOverrideHour = 0;
          this.companyTimeSettingForm.isAdjustEmailAdmin = 0;
          this.companyTimeSettingForm.isAdjustEmailManager = 0;
        }
      },
      yearHappenRadio(value){
        if(value == 1){
          this.editPtoRuleForm.yearHappen = null;
        }
      }
    },
    methods:{
      init(){
        this.getCompanyTimeSetting();
      },
      getCompanyTimeSetting(){
        this.$store.dispatch('getCompanyTimeSetting');
      },
      saveCompanySetting(){
        var data =  JSON.parse(JSON.stringify(this.companyTimeSettingForm));
        if(this.isStateOvertimeRule == 1){
          data.overtimeRule.isWeeklyOvertime = 2
        }
        this.$store.dispatch('saveCompanyTimeSetting',data).then(
          ()=>{
            this.$Message.success('save success');
          }
        );
      }
    }
  }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
    @import "src/assets/css/variable.scss";

    .advanced-setting{
      .advanced-item{
        padding: 10px 30px;
        >.title{
          height: 50px;
          line-height: 50px;
          font-size: 20px;
          color: #325570;
        }
        >.content{
          padding: 10px 20px;
          font-size: 14px;
          color: #335570;
          .advance-item-row{
            font-size: 14px;
            color: #335570;
            line-height: 40px;
            .ivu-el-checkbox-wrapper{
              font-size: 14px;
              color: #335570;
              .ivu-el-checkbox{
                margin-right: 4px;
              }
            }
          }
          .advance-item-row-tip{
            color: #9FB3BF;
            padding-left: 50px;
          }
        }
      }
      .btn-group{
        margin: 20px auto;
        text-align: center;
        button{
          margin:  0 12px;
        }
      }
    }
</style>
